<template>
  <div v-loading="loading">
    <el-collapse-transition>
      <div v-if="detail&&!isShowRefundDetail" ref="printWcYOrderDetail" class="order-detail">
        <div class="app-main-content-box">
          <div class="app-main-top-box">
            <div class="title">订单详情</div>
            <div class="no-print">
              <el-button-group>
                <!-- <el-button
                  v-if="
                    detail.order.orderStatus === 3 &&
                      (userInfo.shopId === 0 ||
                        userInfo.shopId === detail.order.shopInfo.shopId) &&
                      !$store.getters.banBtnList.includes('BTN_REFUND')
                  "
                  size="medium"
                  round
                  type="danger"
                  @click="openRefundOrder"
                >退款</el-button> -->
                <!-- <el-button size="medium" round @click="print">打印</el-button> -->
                <!-- <el-button size="medium" round @click="printTicket">云打印</el-button> -->
                <el-button size="medium" round @click="printTicket" v-if="detail.order.orderStatus === 3">打印小票</el-button>
                <el-button size="medium" round @click="openRefundOrder"  v-if="detail.order.orderStatus === 3">取消订单</el-button>
              </el-button-group>
              <el-button size="medium" round @click="back">返回</el-button>
            </div>
          </div>

          <div>
            <!-- 订单信息 -->
            <div class="info-card-container clearfix">
              <div class="info-card-box fl">
                <div class="cell-item">
                  <div>订单时间：</div>
                  <div>{{ detail.order.createTime }}</div>
                </div>
                <div class="cell-item">
                  <div>订单号：</div>
                  <div>{{ detail.order.orderNo }}</div>
                </div>
                <div class="cell-item">
                  <div>预留手机：</div>
                  <div>{{ detail.order.phone || "-" }}</div>
                </div>
                <div class="cell-item">
                  <div>就餐人数：</div>
                  <div>{{ detail.order.dinersNum || "无" }}</div>
                </div>
                <div class="cell-item">
                  <div>支付方式：</div>
                  <div>{{ detail.order.payment || "无" }}</div>
                </div>
                <div class="cell-item">
                  <div>备注：</div>
                  <div>{{ detail.order.remark || "无" }}</div>
                </div>

              </div>
              <div class="info-card-box fl">
                <div class="cell-item">
                  <div>取餐时间：</div>
                  <div>{{ detail.order.appointTime || "-" }}</div>
                </div>
                <div class="cell-item">
                  <div>取餐号：</div>
                  <div>{{ detail.order.offlineNo || "-" }}</div>
                </div>
                <div class="cell-item">
                  <div>桌台号：</div>
                  <div>{{ detail.order.tableNo || "-" }}</div>
                </div>
                <div class="cell-item">
                  <div>用餐方式：</div>
                  <div>{{ detail.order.orderType }}</div>
                </div>
                <div class="cell-item">
                  <div>门店：</div>
                  <div>
                    {{
                      (detail.order.shopInfo && detail.order.shopInfo.shopName) ||
                        "-"
                    }}
                  </div>
                </div>
              </div>

              <div class="info-card-box fr">
                <div class="substatus">
                  订单状态：
                  <span
                    :class="orderStatusClassOptions[detail.order.orderStatus]"
                  >{{ orderStatusOptions[detail.order.orderStatus] }}</span>
                </div>
                <div class="price">
                  订单金额：
                  <span class="app-text-color-primary">￥{{ detail.order.totalFee }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 头部 -->

        <!-- 详情区 -->

        <div class="content">
          <div class="detail-card-container">
            <div class="detail-card-box detail-card-box_l fl">
              <!--  费用明细 -->
              <el-card>
                <AppMainSubTitle title="点餐明细：" />
                <!-- <el-table
                  size="small"
                  :data="detail.order.items"
                  border
                  stripe
                  style="width: 100%"
                  empty-text="暂无数据"
                >
                  <el-table-column prop="itemName" label="名称" />
                  <el-table-column prop="specAttrRemark" label="规格" />
                  <el-table-column prop="count" label="数量" />
                  <el-table-column prop="fee" label="价格" />
                </el-table> -->
                <div class="self_table">
                  <div class="header_list">
                    <div class="th">名称</div>
                    <div class="th">规格</div>
                    <div class="th">数量</div>
                    <div class="th">价格</div>
                  </div>
                  <div v-if="detail.order.items.length>0">
                    <div v-for="(item,index) in detail.order.items" :key="index" class="">
                      <div class="tr">
                        <div class="td">{{ item.itemName }}</div>
                        <div class="td">{{ item.specAttrRemark }}</div>
                        <div class="td">{{ item.count }}</div>
                        <div class="td">{{ item.fee }}</div>
                      </div>
                      <div v-if="detail.cyItemGiftSnapshotMap!=null&&Object.keys(detail.cyItemGiftSnapshotMap).toString().indexOf(item.itemId)!=-1" class="free">
                        <span>赠</span>{{ detail.cyItemGiftSnapshotMap&&returnSrting(detail.cyItemGiftSnapshotMap[item.itemId]) }}
                      </div>

                    </div>
                    <div v-if="detail.order.teaOrPackFee>0" class="tr">
                      <div class="td">{{ detail.order.orderTypeInt==1?'茶位费':'打包费' }}</div>
                      <div class="td">-</div>
                      <div class="td">{{ detail.order.dinersNum }}</div>
                      <div class="td">{{ detail.order.orderTypeInt==1?(detail.order.dinersNum*detail.order.teaOrPackFee):detail.order.teaOrPackFee }}</div>
                    </div>
                  </div>
                  <div v-else class="noData">
                    暂无数据
                  </div>
                </div>
              </el-card>

              <el-card>
                <AppMainSubTitle title="费用明细：" />
                <div class="cell-item">
                  <div>总价：</div>
                  <div>￥{{ detail.order.totalFee }}</div>
                </div>
                <div v-if="detail.order.discountFee" class="cell-item">
                  <div>优惠：</div>
                  <div>
                    <span class="app-text-color-danger">￥{{ detail.order.discountFee }}</span>
                    &nbsp;&nbsp;&nbsp;{{ detail.order.discountName }}
                  </div>
                </div>
                <div class="cell-item">
                  <div>合计：</div>
                  <div>
                    ￥{{ detail.order.payFee }}&nbsp;&nbsp;&nbsp;{{
                      detail.order.payment
                    }}
                  </div>
                </div>
                <!-- <div
				  v-if="detail.order.orderStatus===9"
				  class="no-print"
				  style="text-align:center"
				>
				  <el-button size="small" round type="primary" @click="openCancelCost">取消账单</el-button>
				</div> -->
              </el-card>
            </div>

            <div class="detail-card-box detail-card-box_r fr">
              <el-card>
                <div>
                  <AppMainSubTitle title="顾客信息：" />
                  <div class="cell-item">
                    <div>顾客姓名：</div>
                    <div>{{ (detail.customer && detail.customer.name) || "-" }}</div>
                  </div>
                  <div class="cell-item">
                    <div>会员等级：</div>
                    <div>{{ (detail.customer && detail.customer.memberInfo) || "-" }}</div>
                  </div>
                  <div class="cell-item">
                    <div>手机号码：</div>
                    <div>{{ (detail.customer && detail.customer.phone) || "-" }}</div>
                  </div>
                </div>
              </el-card>
              <el-card v-if="detail.order.orderStatus===9&&detail.refundResult">
                <AppMainSubTitle title="退款明细：" />
                <div class="cell-item">
                  <div>退款时间：</div>
                  <div>{{ detail.refundResult.time }}</div>
                </div>
                <div class="cell-item">
                  <div>退款状态：</div>
                  <div>{{ detail.refundResult.status }}</div>
                </div>
                <div class="cell-item">
                  <div>退款备注：</div>
                  <div>{{ detail.refundResult.remark }}</div>
                </div>
                <div class="cell-item">
                  <div>退款金额：</div>
                  <div>
                    ￥{{ detail.order.payFee }}
                    <el-button
                      v-if="detail.refundResult.refundNo"
                      size="small"
                      type="text"
                      round
                      style="padding:0"
                      @click="openRefundRecordDetail(detail.refundResult.refundNo)"
                    >详情</el-button>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>

        <!-- 弹框 -->
        <DialogRefundCodeOrder ref="refundOrder" />
      </div>
    </el-collapse-transition>

    <!-- 退款详情 -->
    <el-collapse-transition />
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
  getOrderDetail,
  printOrderTicket
} from '../../api/record'
import DialogRefundCodeOrder from './DialogRefundCodeOrder'
export default {
  components: {
    DialogRefundCodeOrder
  },
  data() {
    return {
      // 配置
      orderStatusOptions: {
        1: '待付款',
        2: '待付款',
        4: '已取消',
        5: '已取消',
        3: '已完成',
        9: '已退款'
      },
      orderStatusClassOptions: {
        3: 'app-text-color-success',
        9: 'app-text-color-danger',
        1: 'app-text-color-primary',
        2: 'app-text-color-primary',
        4: 'app-text-color-primary',
        5: 'app-text-color-primary'
      },
      // 状态
      isShowRefundDetail: false,
      loading: false,
      // 数据
      orderNo: '',
      detail: '',
      giftList: []
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {},
  mounted() {},
  methods: {
    /**
       *  获取数据
       */
    // 打开页面
    open({ orderNo }) {
      this.detail = ''
      this.orderNo = orderNo
      this.initData()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    // 获取详情
    initData() {
      this.loading = true
      getOrderDetail({ orderNo: this.orderNo })
        .then(res => {
          this.detail = res.data
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false
        })
    },
    returnSrting(arr) {
      if (!arr || arr == null) return
      let Str = ''
      arr.forEach((ele, index) => {
        Str += `${ele.productName}${ele.num}份${arr.length - 1 == index ? '' : ','}`
      })
      return Str
    },

    /**
       * 按钮组
       */
    // 返回
    back() {
      if (this.$route.query.from === 'cancelTable' && this.$route.query.orderNo) return window.close()
      this.resolve && this.resolve()
    },

    // 打开退款
    openRefundOrder() {
      this.$refs.refundOrder.open(this.detail).then(res => {
        this.initData()
      })
    },

    // 打开退款详情
    openRefundRecordDetail(refundNo) {
      this.isShowRefundDetail = true
      this.$refs.refundRecordDetail.fetchData(refundNo).then(res => {
        this.isShowRefundDetail = false
      })
    },

    // 打印
    // print() {
    //   this.$print(this.$refs.printWcYOrderDetail);
    // },

    // 云打印、
    printTicket() {
      const params = {}
      params.orderNo = this.detail.order.orderNo
      this.loading = true
      printOrderTicket(params)
        .then(res => {
          this.$notify({
            title: '成功',
            message: '请求打印小票成功',
            type: 'success',
            duration: 2000,
            offset: 40
          })
        })
        .catch(err => {})
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>

<style scoped lang="scss">
  .self_table{
    width: 100%;
    // border: 1px solid #dfe6ec;
    .header_list{
      display: flex;
      justify-content: space-between;
      font-weight: bold;
      >:not(:first-child){
        border-left: none !important;
      }
    }
    .tr{
      display: flex;
      >:not(:first-child){
        border-left: none !important;
      }
      .td{
        border-top: none !important;;
      }
    }
    .th,.td{
        font-size: 14px;
        width: 25%;
        padding:8px 10px;
        border: 1px solid #dfe6ec;
        word-break: break-all;
    }
    .free{
      padding: 10px;
      font-size: 14px;
      span{
        background: #ffb72f;
        padding: 5px;
        color: #fff;
        border-radius: 2px;
        margin-right: 10px;
      }
      border: 1px solid #dfe6ec;
      border-top: none !important;

    }
    .noData{
      border: 1px solid #dfe6ec;
      font-size: 14px;
      min-height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .order-detail {
    /**列表容器 */
    .cell-item {
      width: 100%;
      display: flex;
      font-size: 14px;
      line-height: 28px;
      > div:first-child {
        flex: 0 0 80px;
        width: 80px;
        margin-right: 10px;
        color: #606266;
        font-weight: bold;
        text-align: right;
      }
      > div:last-child {
        flex: 1 1 auto;
        color: #303133;
      }
    }

    /* 内容 */
    .content {
      margin-top: 10px;
    }

    /* 订单 */
    .info-card-box {
      overflow: hidden;
      width: 33.33%;
      padding-right: 10px;
      .substatus,
      .price {
        margin-top: 20px;
        font-weight: bold;
        font-size: 18px;
        text-align: right;
      }
    }

    /* 订单详情 */
    .detail-card-container {
      .detail-card-box {
        width: 50%;
      }
      .detail-card-box_l {
        padding-right: 5px;
      }
      .detail-card-box_r {
        padding-left: 5px;
      }
      .el-card {
        margin-bottom: 10px;
      }
    }
  }
</style>
